

<!-- 礼品卡 -->
<template>
	<view>
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="礼品卡" colorTheme="black" gotoNavBackCustom="1" @gotoNavBackCustomHandler="gotoNavBackCustomHandler">
			</navHeader>
		</view>

		<view class="body">

			<!-- 余额信息 -->
			<view class="balance-Container">

				<view class="bg"></view>

				<!-- 交易记录 -->
				<view @click="tradingRecord()" class="dealRecord">
					<image :src="icon.tradeIcon"></image>
					<view>交易记录</view>
				</view>

				<!-- 描述/金额 -->
				<view class="balance-desc">礼品卡余额（元）</view>
				<view class="balance">{{giftCardBalance}}</view>
			</view>

			<!-- 礼品卡列表 -->
			<view class="cardInfo-Container">
				
				<!-- 功能菜单 -->
				<view class="menuList-Container">
					<view @click="bindGiftCard()" class="menu-item">
						<image :src="icon.bindCard"></image>
						<view class="desc">绑定礼品卡</view>
					</view>
					<view class="splitLine borderOneRpx"></view>
					<view @click="giftCardMyCard()" class="menu-item">
						<image :src="icon.cardList"></image>
						<view class="desc">我的礼品卡</view>
					</view>
				</view>
				
				<view class="tipsInfo">
					以下为电子礼品卡，不支持配送。
				</view>

				<view v-if="giftCardList && giftCardList.length" class="cardList-Container">
					<view class="content">

						<view v-for="(item, index) in giftCardList" :key="index" class="card-item">

							<!-- 礼品卡封面 -->
							<image class="poster" :src="imgSite+item.cgImage"></image>

							<view class="infos">
								<view class="name ellipsis1">{{item.cgTitle}}</view>

								<view class="priceBuy">

									<!-- 区分单规格 -->
									<view v-if="item.minAmount != item.maxAmount" class="price">¥{{item.minAmount / 100}}-{{item.maxAmount / 100}}<text>/张</text>
									</view>
									<view v-else class="price">¥{{item.minAmount / 100}}<text>/张</text>
									</view>
									<view @click="buyGiftCard_modal(index, item.cgId)" class="buy-Container">
										<view>购买</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<g-empty v-else></g-empty>
			</view>
		</view>


		<!-- 购买操作 -->
		<view v-if="showSpecModal" catchtouchmove="modalPreventScrollEvent" class="modalPreventScrollStyle">

			<view class="cart-modal flex-center spec-Container">
				<view class="modal-bg" @tap.stop="closeModal"></view>
				<view class="modal-panels">

					<!-- 当前规格 -->
					<view class="currentSpec goods-item flex-center">

						<view class="goods-logo">
							<image :src="imgSite + specInfoCurrent.cgImage" mode="widthFix"></image>
						</view>

						<!-- 已选规格 -->
						<view class="goods-main flex1-center">

							<!-- 名称 -->
							<view style="display:flex; width:100%;">
								<view class="goods-title ellipsis2">{{specInfoCurrent.cgTitle}}</view>
							</view>

							<!-- 价格 -->
							<view class="goods-buy flex-center">
								<view class="goods-price">{{'¥'+specInfoList[specIndex].cgsAmount / 100}}</view>
							</view>
						</view>
					</view>

					<!-- 规格/数量 -->
					<view class="goods-select specNum-Container">

						<!-- 规格信息 -->
						<view class="goods-select-title flex-center">
							<view>面值</view>
						</view>
						<scroll-view scroll-y style="width: 100%; height: 200rpx; overflow: scroll;">
							<view class="goods-select-lists flex-center" v-if="specInfoList.length">
								<view :class="specIndex == index?'goods-select-item active':'goods-select-item'" v-for="(item, index) in specInfoList"
								 :key="index" @click="selectSpec(index)">￥{{item.cgsAmount / 100}}</view>
							</view>
						</scroll-view>
					</view>

					<!-- 确认按钮 -->
					<view class="cartBuy-Container">
						<view @tap.stop="cardOrderSubmit" class="modalSubmit btn">确认</view>
					</view>

					<!-- 关闭按钮 -->
					<image class="close" :src="icon.closeBtn" @click="closeModal" lazy-load="true" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 绑定礼品卡 -->
		<view v-if="bindCardFlag" class="modalBg-Container">
			<view class="bindCard-Container">
				<view class="bindTitle">
					绑定礼品卡
				</view>
				<view class="cardPass">
					<input type="text" v-model="cgcPassword" placeholder-class="inputHolder" placeholder="请输入礼品卡密码"/>
				</view>
				
				<view class="operator-Container">
					<view @click="cancelBindHandler()" class="cancelBtn">
						暂不绑定
					</view>
					<view @click="bindGiftCardHandler()" class="rechargeBtn">
						充值到账户
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		computed: {
			...mapState(['imgSite', 'hasLogin'])
		},
		data() {
			return {
				icon: {
					closeBtn: "/static/images/user/giftCard/close-btn.png",
					tradeIcon: "/static/images/user/giftCard/right-arrow.png",
					bindCard: "/static/images/user/giftCard/bindCard.png",
					cardList: "/static/images/user/giftCard/cardList.png"
				},
				
				//规格窗口
				specInfoCurrent: {},
				specInfoList: [],
				specIndex: 0,
				showSpecModal: false,
				
				//礼品卡列表
				giftCardList: [],
				
				//分页相关
				pageNum: 1,
				pageSize: 10,
				
				giftCardBalance: 0,
				bindCardFlag: false,
				cgcPassword: ""
			};
		},
		onShow: function() {
			this.showSpecModal = false;
			this.giftCardBalanceFun();
			this.getGiftCardList();
		},
		methods: {
			
			//后退
			gotoNavBackCustomHandler() {
				uni.switchTab({
					url: "/pages/user/user"
				});
			},

			/**
			 * 绑定礼品卡
			 */
			bindGiftCard() {
				this.bindCardFlag = true;
			},
			cancelBindHandler() {
				this.bindCardFlag = false;
			},
			bindGiftCardHandler() {

				if(!this.cgcPassword.trim()) {
					this.$api.msg("请输入礼品卡密码");
					this.cgcPassword = "";
					return ;
				}

				var that = this;
				uni.showModal({
					content: '礼品卡面值金额将充入账户余额，是否确认充值？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							
							that.$api.globalUtil.requestAjax({
								url: '/GiftCardApi/bind',
								method: 'POST',
								data: {
									cgcPassword: that.cgcPassword
								},
								success: function(res) {
									that.$api.msg("充值成功");
									setTimeout(function() {
										that.bindCardFlag = false;
										that.giftCardBalanceFun();
									}, 2000);
								}
							});
						}
					}
				});
			},
			

			/**
			 * 我的礼品卡
			 */
			giftCardMyCard() {
				uni.navigateTo({
					url: "/pagesAccount/giftCard/myCard"
				});
			},

			/**
			 * 交易记录
			 */
			tradingRecord() {
				uni.navigateTo({
					url: '/pagesAccount/giftCard/detailed'
				});
			},

			/**
			 * 礼品卡余额
			 */
			giftCardBalanceFun() {
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/findAccountBalanceByCustomerIdForApi',
					method: 'POST',
					success: function(res) {
						that.giftCardBalance = res.data.response.giftCardBalance / 100;
					}
				});
			},

			/**
			 * 礼品卡列表
			 */
			getGiftCardList() {
				
				let that = this;
				that.$api.globalUtil.requestAjax({
					url: '/GiftCardApi/findGiftCardAll',
					method: "POST",
					data: {
						pageNum: that.pageNum,
						pageSize: that.pageSize
					},
					success: function(res) {
						if(res.data.success) {
							if(that.pageNum == 1) { 
								that.giftCardList = [];
							}
							if(res.data.response.results && res.data.response.results.length) {
								if(that.pageNum == 1) {
									that.giftCardList = res.data.response.results;
								}else {
									that.giftCardList = that.giftCardList.concat(res.data.response.results);
								}
							}else {
								if(that.pageNum != 1) {
									that.$api.msg("没有更多数据了!");
								}
							}
						}
					}
				});
			},

			/**
			 * 点击购买
			 */
			buyGiftCard_modal(index, cardId) {

				let that = this;
				that.$api.globalUtil.requestAjax({
					url: '/GiftCardApi/findSpecificationListByGiftCardId',
					method: "POST",
					data: {
						cgsCardId: cardId
					},
					success: function(res) {
						if(res.data.success) {
							that.specInfoCurrent = that.giftCardList[index];
							that.specIndex = 0;
							that.specInfoList = res.data.response || [];
							that.showSpecModal = true;
						}
					},
				});
			},

			/**
			 * 选择规格
			 */
			selectSpec(index) {
				this.specIndex = index;
			},
			closeModal() {
				this.showSpecModal = false;
			},

			/**
			 * 提交订单
			 */
			cardOrderSubmit() {
				let params = {
					cgId: this.specInfoList[this.specIndex].cgsId,
					cgImage: this.specInfoCurrent.cgImage,
					cgTitle: this.specInfoCurrent.cgTitle,
					cgsAmount: this.specInfoList[this.specIndex].cgsAmount
				};
				
				uni.navigateTo({
					url: 'submit?params='+JSON.stringify(params)
				});
			}
		}
	};
</script>
<style lang="scss">
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	.menuList-Container {
		display: flex;
		align-items: center;
		margin: 0 auto;
		padding: 0 30rpx;
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius:16rpx 16rpx 0px 0px;
		background-color: #FFFFFF;
		box-shadow: 0px -7rpx 18rpx 0px rgba(155, 155, 155, 0.5);
		
		.menu-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			height: 100%;
			line-height: 96rpx;
			
			image {
				width: 44rpx;
				height: 44rpx;
			}
			.desc {
				margin-left: 20rpx;
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}
		}
		
		//分割线
		.splitLine {
			position: relative;
			width: 1rpx;
			height: 50rpx;
			
			&.borderOneRpx:after {
				border-top: 0;
				border-left: 0;
				border-bottom: 0;
				border-color: #EEEEEE;
			}
		}
	}
	
	
	//绑定礼品卡
	.modalBg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background:rgba(0,0,0,0.7);
		
		.bindCard-Container {
			width:600rpx;
			height:436rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			
			.bindTitle {
				margin-top: 50rpx;
				width: 100%;
				line-height:40rpx;
				text-align: center;
				font-size:30rpx;
				font-family:PingFang SC;
				// font-weight:bold;
				color:rgba(51,51,51,1);
			}
			
			.cardPass {
				margin: 0 auto;
				margin-top: 70rpx;
				width:508rpx;
				height:86rpx;
				line-height: 86rpx;
				background:rgba(238,238,238,1);
				border-radius:10rpx;
				
				input {
					width: 100%;
					height:86rpx;
					line-height: 86rpx;
					text-align: center;
				}
				.inputHolder {
					text-align: center;
					font-size: 26rpx;
					color: #BFBFBF;
				}
			}
			
			.operator-Container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				margin-top: 70rpx;
				width: 464rpx;
				height: 70rpx;
				
				.cancelBtn {
					width:210rpx;
					height:70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size:28rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:rgba(224,19,39,1);
					background:rgba(255,255,255,1);
					border:1rpx solid rgba(224,19,39,1);
					border-radius:35rpx;
				}
				
				.rechargeBtn {
					width:210rpx;
					height:70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size:28rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:#FFFFFF;
					background:#FE5E49;
					border-radius:35rpx;
				}
			}
		}
	}


	/* 余额信息 */
	.balance-Container {
		position: relative;
		margin: 0 auto;
		margin-top: 40rpx;
		width: 654rpx;
		height: 270rpx;
		
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:linear-gradient(135deg,rgba(224,19,39,1) 0%,rgba(209,4,152,1) 100%);
			box-shadow:0px 0px 26rpx 0px rgba(224,19,39,0.4);
			border-radius:22rpx 22rpx 0 0;
		}
		
		.dealRecord {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			position: absolute;
			top: 20rpx;
			right: 30rpx;
			height: 20rpx;
			font-size: 20rpx;
			font-family: Microsoft YaHei;
			color: #FFFFFF;
			
			image {
				width: 8rpx;
				height: 14rpx;
			}
			
			view {
				margin-right: 15rpx;
			}
		}
		
		.balance-desc {
			position: absolute;
			top: 158rpx;
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			color: #FFFFFF;
		}
		
		.balance {
			position: absolute;
			top: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 56rpx;
			font-family: Microsoft YaHei;
			color: #FFFFFF;
		}
	}


	/* 礼品卡信息 */
	.cardInfo-Container {
		position: relative;
		left: 0px;
		width: 100%;
		background: #F5F5F5;
		border-radius: 21rpx 21rpx 0 0;
	}

	.cardInfo-Container .tipsInfo {
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		color: #999999;
	}

	.cardInfo-Container .cardList-Container {
		top: 75rpx;
		width: 100%;
	}

	.cardInfo-Container .cardList-Container .content {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
	}

	.cardInfo-Container .cardList-Container .card-item {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		margin-bottom: 18rpx;
		width:336rpx;
		height:348rpx;
		background:rgba(255,255,255,1);
		box-shadow:0px -3rpx 12rpx 0px rgba(143,143,143,0.06);
		border-radius:10rpx;
	}

	.cardInfo-Container .cardList-Container .card-item:last-of-type {
		/* margin-bottom: 0; */
	}

	.card-item .poster {
		margin: 0 auto;
		margin-top: 14rpx;
		width: 308rpx;
		height: 198rpx;
	}

	.card-item .infos {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		width: 308rpx;
		height: 136rpx;
	}

	.card-item .infos .name {
		margin-top: 32rpx;
		width: 100%;
		height: 26rpx;
		line-height: 26rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.card-item .infos .priceBuy {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
		width: 100%;
		height: 42rpx;
	}

	.card-item .infos .price {
		height: 22rpx;
		font-size: 24rpx;
		font-family: Arial;
		font-weight: 400;
		color: #E01327;
	}

	.card-item .infos .price>text {
		font-size: 24rpx;
		color: #999999;
	}

	.buy-Container {
		width:74rpx;
		height:36rpx;
		line-height: 36rpx;
		text-align: center;
		font-size:20rpx;
		font-family:PingFang SC;
		color:rgba(255,255,255,1);
		background:linear-gradient(135deg,rgba(224,19,39,1) 0%,rgba(209,4,152,1) 100%);
		box-shadow:0px 4rpx 10rpx 0px rgba(222,16,58,0.2);
		border-radius:18rpx;
	}


	/* 规格弹窗 */
	.cart-modal {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		justify-content: center;
		z-index: 1;
	}

	.cart-modal .modal-bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 10;
	}

	.cart-modal .modal-panels {
		width: 750rpx;
		height: 640rpx;
		background: rgba(255, 255, 255, 1);
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
		position: relative;
		z-index: 99;
		margin-top: auto;
	}

	.modal-panels .modal-title {
		font-size: 22rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		height: 118rpx;
		line-height: 118rpx;
		text-align: center;
		border-bottom: 1rpx solid #e6e6e6;
		margin: 0 48rpx;
	}

	.modal-panels .close {
		position: absolute;
		right: 36rpx;
		top: 36rpx;
		width: 24rpx;
		height: 24rpx;
	}

	.spec-Container {}

	.spec-Container .modal-panels {
		height: 680rpx;
	}

	.spec-Container .currentSpec {
		padding: 48rpx 0;
		margin: 0 auto;
		width: 690rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.goods-item .goods-logo {
		display: flex;
		align-items: center;
		flex: 0 0 170rpx;
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
		border: 1px solid rgba(188, 188, 188, 1);
	}

	.goods-item .goods-logo image {
		width: 170rpx;
		height: 170rpx;
	}

	.goods-item .goods-main {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 30rpx;
		width: calc(100% - 170rpx);
		height: 170rpx;
		
		.goods-title {
			font-size:28rpx;
			font-family:PingFang SC;
			color:rgba(51,51,51,1);
		}
		
		.goods-price {
			margin-top: 30rpx;
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(224,19,39,1);
		}
	}


	/* 确认按钮 */
	.cartBuy-Container {
		display: flex;
		justify-content: space-between;
		bottom: 60rpx;
		margin: 0 auto;
		width:600rpx;
		height:70rpx;
	}
	.modalSubmit {
		width: 100%;
		height: 100%;
		background:#FE5E49;
		border-radius:35rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 76rpx;
		margin-bottom: 24rpx;
		margin-top: auto;
	}


	/* 设置规则 */
	.goods-select {
		padding: 30rpx 28rpx;
		background-color: #fff;
	}

	.goods-select-title {
		height: 50rpx;
	}

	.goods-select-title view {
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 40rpx;
		margin-right: auto;
	}

	.goods-select-title image {
		width: 48rpx;
	}

	.goods-select-title input {
		margin-left: 10rpx;
		margin-right: 10rpx;
		border: none;
		width: 120rpx;
		text-align: center;
		font-size: 39rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 50rpx;
		height: 50rpx;
	}


	/* 规格选择 */
	.goods-select-lists {
		flex-wrap: wrap;
	}

	.goods-select-lists .goods-select-item {
		margin-right: 33rpx;
		padding: 0 30rpx;
		height: 60rpx;
		background: rgba(245, 245, 245, 1);
		border-radius: 30rpx;
		font-size: 25rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 60rpx;
		margin-top: 16rpx;
	}

	.goods-select-lists .active {
		color: #E01327;
		background:rgba(255,237,237,1);
		border:1rpx solid #E01327;
	}
</style>



